import React, { FC } from 'react';
import { Breadcrumb, Layout, Menu, theme } from 'antd';
import { Suspense } from 'react'
import { useRoutes } from 'react-router-dom'
import routes from "./router"
import AppHeader from './components/AppHeader'
import AppFooter from './components/AppFooter'

const { Header, Content, Footer } = Layout;

const items = new Array(3).fill(null).map((_, index) => ({
  key: String(index + 1),
  label: `nav ${index + 1}`,
}));

const App: FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout>
      <AppHeader></AppHeader>
      <Content style={{ padding: '0 140px' }}>
        <div
          style={{
            padding: 0,
            minHeight: 380,
            background: colorBgContainer,
            borderRadius: borderRadiusLG,
          }}
        >
          <Suspense fallback="">
            <div>{useRoutes(routes)}</div>
          </Suspense>
        </div>
      </Content>
    </Layout>
  );
};

export default App;



